<!--
 * @Description: 
 * @Author: nxd
 * @Date: 2023-01-04 23:11:05
 * @LastEditors: nxd
 * @LastEditTime: 2023-02-19 12:37:30
-->
<template>
    <div class="table">
        <div class="about">
        <var-app-bar :elevation="false" color="white" title="账号信息" title-position="center" text-color="#000000">
      <template #left>
        <var-button @click="resetup" color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
</div> 
<div class="myheader">
         <div class="myicon">
         <var-image
         class="myicon_img"
         width="70px"
         height="70px"
         fit="cover"
         radius="50%"
         src="https://varlet.gitee.io/varlet-ui/cat.jpg"
         />
         </div>
<div class="mydata">
<div class="name">
               <p>{{user.name}}</p>
               <svg t="1672375719652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1148" width="17" height="17"><path d="M94.51140693333332 487.7274069333333h378.6524448V111.50222186666662H94.51140693333332v376.22518506666665zM189.1745184 206.1653333333333H378.50074026666664v189.32622186666669H189.1745184V206.1653333333333zM519.2817781333334 111.50222186666662v378.6524448h378.65244373333337V111.50222186666662H519.2817781333334z m283.9893333333333 281.56207466666666h-189.32622293333333V206.1653333333333h189.32622293333333v186.8989632z m-565.5514079999999-46.1179264h94.66311146666666v-94.66311040000001h-94.66311146666666v94.66311040000001zM94.51140693333332 912.4977781333334h378.6524448V536.2725930666667H94.51140693333332V912.4977781333334z m94.66311146666666-281.56207466666666H378.50074026666664v189.32622293333333H189.1745184v-189.32622293333333z m567.9786666666666-378.65244373333337h-94.66311146666666v94.66311040000001h94.66311146666666v-94.66311040000001zM519.2817781333334 912.4977781333334h94.66311040000001v-94.66311146666666h-94.66311040000001V912.4977781333334z m94.66311040000001-281.56207466666666v189.32622293333333h94.66311146666666v-189.32622293333333h-94.66311146666666z m189.32622293333333 186.8989632h-94.66311146666666V912.4977781333334h189.32622186666669v-189.32622293333333h-94.66311040000001v94.66311146666666z m0-186.8989632h94.66311040000001v-94.66311040000001h-94.66311040000001v94.66311040000001z m-283.9893333333333-94.66311040000001v94.66311040000001h94.66311040000001v-94.66311040000001h-94.66311040000001z m-281.56207466666666 235.4441472h94.66311146666666v-94.66311040000001h-94.66311146666666v94.66311040000001z m0 0" fill="#2c2c2c" p-id="1149"></path></svg>
               <!-- <var-icon class="righticon" name="chevron-right" size="25"  /> -->
            </div>
<div class="stuid">
               <p>学号：{{user.userNumber}}</p>
               <!-- <p class="classname">班级：</p> -->
            </div>
            <div class="major">
               <p>计算机科学与技术(软件工程方向)</p>
            </div>
    </div>
  </div>
  </div>
</template>

<script lang="ts" setup>
import router from '../../../router/index'
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from '../../../stores/user';
const userstore  = useUserStore();
userstore.getuser()
const {user}  = storeToRefs(userstore);
console.log(user.value)

function resetup(){
  router.push('/setup')
  console.log('返回个人设置页');
  
 };
</script>

<style lang="less">
.table{
    .about{
        .var-app-bar{
    height:60px;
    }

   

  .var-app-bar__title{
    font-weight:500;
    font-size:18px
  }
    }

    .myheader{
         // width: 350px;
         height: 140px;
         margin: 10px 10px 10px 10px;
         background-color: white;
         border-radius: 5%;
         display: flex;
    .myicon{
            flex: 1;
            
            .myicon_img{
              margin-left: 15px;
              margin-top: 29px;
            }

         }
    .mydata{
            flex:3;
            .name{
               margin-left: 5px;
               p{
                  font-size: 22px; 
                  font-weight: 600;
                  line-height: 0%;
                  margin-top: 40px;
                  float: left;
               }
               .icon{
                  margin-top: 32px;
                  margin-left: 8px;
               }
              // .righticon{
              //  color: #b2bec3;
              //  float: right;
              //  margin-top:30px;
              //  margin-right: 5px;
              // }
            }
            .stuid{
               height: 20px;
               font-size: 14px;
               margin-top: 11px;
               p{
                  color: #b2bec3;
                  line-height: 0%;
                  float: left;
                  margin-left: 5px;
               }
              //  .classname{
              //     margin-left: 24px;
              //  }
            }
            .major{
               font-size: 14px;
               line-height: 0%;
               p{
                  color: #b2bec3;
                  // float: left;
                  margin-left: 5px;
                  margin-top: 15px;
               }
            }
          }
        }
}
</style>